<template>
  <div class="historyTable">
    <div class="historyTable-toolbar">
      <div class="menu-wrapper">
        <el-menu mode="horizontal" defaultActive="1" class="dg-view-menu">
          <el-menu-item index="1">
            <el-icon>
              <platform/>
            </el-icon>
            {{ $t('wms.lineSelect') }}:
          </el-menu-item>
        </el-menu>
        <el-tabs v-model="activeName" class="demo-tabs tabs" @tab-click="handleClick">
          <el-tab-pane :label="$t('mes.all')" name="all"></el-tab-pane>
          <el-tab-pane :label="$t('wms.lin1')" name="first"></el-tab-pane>
          <el-tab-pane :label="$t('wms.lin2')" name="second"></el-tab-pane>
        </el-tabs>
        <div class="menu-right">
          <el-form :inline="true" label-width="100px">
            <el-form-item :label="$t('wms.dates')">
              <el-date-picker v-model="data.times" type="date"
                              style="width: 100%" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :clearable="false"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">
                <el-icon>
                  <search/>
                </el-icon>
                {{ $t('wms.search') }}
              </el-button>
              <el-button type="info" @click="onRest">
                <el-icon>
                  <RefreshLeft/>
                </el-icon>
                {{ $t('wms.rest') }}
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="historyTable-content">
      <el-table border :data="data.tablesList" :fit="true" table-layout="fixed" header-align="center" stripe
                style="flex: 1 1 auto"
                :header-cell-style="{color:'#000',textAlign:'center',borderColor:' #CCC',background:'#f9f9f9'}"
                :cell-style="{textAlign:'center'}">

        <el-table-column prop="TimePeriod" :label="$t('wms.timPeriod')"/>
        <el-table-column prop="JKJInputQty" :label="$t('wms.JKJInputs')">
          <template #default="scope">
            <el-tag type="warning" size="large"
                    style="width:80px;font-weight: 600;font-size: 15px;padding: 0 10px">{{
                scope.row.JKJInputQty
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="JKJOutputQty" :label="$t('wms.JKJOutputs')">
          <template #default="scope">
            <el-tag type="success" size="large"
                    style="width:80px;font-weight: 600;font-size: 15px;padding: 0 10px">{{
                scope.row.JKJOutputQty
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="JKJOutputDifferenceQty" :label="$t('wms.difference')">
          <template #default="scope">
            <el-tag size="large" style="width: 80px;font-weight: 600;font-size: 15px;padding: 0 10px">
              {{ scope.row.JKJOutputDifferenceQty }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="PEOutputQty" :label="$t('wms.PEOutputs')">
          <template #default="scope">
            <el-tag type="success" size="large"
                    style="width:80px;font-weight: 600;font-size: 15px;padding: 0 10px">{{
                scope.row.PEOutputQty
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="PEOutputDifferenceQty" :label="$t('wms.difference')">
          <template #default="scope">
            <el-tag size="large" style="width: 80px;font-weight: 600;font-size: 15px;padding: 0 10px">
              {{ scope.row.PEOutputDifferenceQty }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="DROutputQty" :label="$t('wms.finishedProductOutputs')">
          <template #default="scope">
            <el-tag type="success" size="large" style="width: 80px;font-weight: 600;font-size: 15px;padding: 0 10px">
              {{ scope.row.DROutputQty }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="DROutputDifferenceQty" :label="$t('wms.difference')">
          <template #default="scope">
            <el-tag size="large" style="width: 80px;font-weight: 600;font-size: 15px;padding: 0 10px">
              {{ scope.row.DROutputDifferenceQty }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, watch, defineProps, defineEmits } from 'vue'
import iconFont from '@/components/IconFont/iconFont'
import useI18n from '@/hooks/language'
import { getProductDataByDay } from '@/api/mesApi'
import config from '@/config'

const { t } = useI18n()

// 表格绑定的样式
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

// 定义变量
const data = reactive({
  tablesList: [],
  times: '',
  currentPage: 1,
  pageSize: 20,
  total: 0
})
onMounted(() => {
  data.times = currTime()
  table()
  setTime()
})
// 获取当前日期
const currTime = () => {
  var current = new Date()
  current.setTime(current.getTime() - (60 * 60 * 1000 * 3))
  var formatted = current.toISOString().replace(/T/, ' ').replace(/\..+/, '')
  return formatted.substring(0, 10)
}
const setTime = () => {
  setInterval(async () => {
  }, 6000)
}
// 表格获取数据
const table = () => {
  // 获取数据
  getProductDataByDay({
    currentDate: data.times + ' 00:00:00'
  }).then(res => {
    data.tablesList = []
    data.total = 0
    if (res.Status === 200) {
      // 全部的时候
      var arr = []
      var arr2 = []
      Object.entries(res.ProductDataByHourofLine1).forEach((item, index) => {
        if (item[0] === 'HourOne') {
          item[1].TimePeriod = '00:00 ~ 01:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourTwo') {
          item[1].TimePeriod = '01:00 ~ 02:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourThree') {
          item[1].TimePeriod = '02:00 ~ 03:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourFour') {
          item[1].TimePeriod = '03:00 ~ 04:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourFive') {
          item[1].TimePeriod = '04:00 ~ 05:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourSix') {
          item[1].TimePeriod = '05:00 ~ 06:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourSeven') {
          item[1].TimePeriod = '06:00 ~ 07:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourEight') {
          item[1].TimePeriod = '07:00 ~ 08:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourNine') {
          item[1].TimePeriod = '08:00 ~ 09:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourTen') {
          item[1].TimePeriod = '09:00 ~ 10:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourEleven') {
          item[1].TimePeriod = '10:00 ~ 11:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourTwelve') {
          item[1].TimePeriod = '11:00 ~ 12:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourThirteen') {
          item[1].TimePeriod = '12:00 ~ 13:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourFourteen') {
          item[1].TimePeriod = '13:00 ~ 14:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourFifteen') {
          item[1].TimePeriod = '14:00 ~ 15:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourSixteen') {
          item[1].TimePeriod = '15:00 ~ 16:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourSeventeen') {
          item[1].TimePeriod = '16:00 ~ 17:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourEighteen') {
          item[1].TimePeriod = '17:00 ~ 18:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourNineteen') {
          item[1].TimePeriod = '18:00 ~ 19:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourTwenty') {
          item[1].TimePeriod = '19:00 ~ 20:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourTwentyOne') {
          item[1].TimePeriod = '20:00 ~ 21:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourTwentyTwo') {
          item[1].TimePeriod = '21:00 ~ 22:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourTwentyThree') {
          item[1].TimePeriod = '22:00 ~ 23:00'
          arr.push(item[1])
        }
        if (item[0] === 'HourTwentyFour') {
          item[1].TimePeriod = '23:00 ~ 24:00'
          arr.push(item[1])
        }
      })
      Object.entries(res.ProductDataByHourofLine2).forEach((item, index) => {
        if (item[0] === 'HourOne') {
          item[1].TimePeriod = '00:00 ~ 01:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourTwo') {
          item[1].TimePeriod = '01:00 ~ 02:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourThree') {
          item[1].TimePeriod = '02:00 ~ 03:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourFour') {
          item[1].TimePeriod = '03:00 ~ 04:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourFive') {
          item[1].TimePeriod = '04:00 ~ 05:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourSix') {
          item[1].TimePeriod = '05:00 ~ 06:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourSeven') {
          item[1].TimePeriod = '06:00 ~ 07:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourEight') {
          item[1].TimePeriod = '07:00 ~ 08:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourNine') {
          item[1].TimePeriod = '08:00 ~ 09:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourTen') {
          item[1].TimePeriod = '09:00 ~ 10:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourEleven') {
          item[1].TimePeriod = '10:00 ~ 11:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourTwelve') {
          item[1].TimePeriod = '11:00 ~ 12:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourThirteen') {
          item[1].TimePeriod = '12:00 ~ 13:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourFourteen') {
          item[1].TimePeriod = '13:00 ~ 14:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourFifteen') {
          item[1].TimePeriod = '14:00 ~ 15:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourSixteen') {
          item[1].TimePeriod = '15:00 ~ 16:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourSeventeen') {
          item[1].TimePeriod = '16:00 ~ 17:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourEighteen') {
          item[1].TimePeriod = '17:00 ~ 18:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourNineteen') {
          item[1].TimePeriod = '18:00 ~ 19:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourTwenty') {
          item[1].TimePeriod = '19:00 ~ 20:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourTwentyOne') {
          item[1].TimePeriod = '20:00 ~ 21:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourTwentyTwo') {
          item[1].TimePeriod = '21:00 ~ 22:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourTwentyThree') {
          item[1].TimePeriod = '22:00 ~ 23:00'
          arr2.push(item[1])
        }
        if (item[0] === 'HourTwentyFour') {
          item[1].TimePeriod = '23:00 ~ 24:00'
          arr2.push(item[1])
        }
      })
      // console.log(arr, arr2)
      if (activeName.value === 'all') {
        arr.forEach((item, index) => {
          var item2 = arr2[index]
          var a = Object.keys(item)
          var b = Object.keys(item2)
          a.forEach((x, index) => {
            if (x === b[index] && x !== 'TimePeriod') {
              item[x] = Number(item[x]) + Number(item2[x])
            }
          })
        })
        data.tablesList = arr
        data.total = arr.length
      } else if (activeName.value === 'first') {
        data.tablesList = arr
        data.total = arr.length
      } else {
        data.tablesList = arr2
        data.total = arr2.length
      }
    }
  })
}
const onSubmit = () => {
  table()
  // 传值
  emits('getChildren', activeName.value, data.times)
}

const onRest = () => {
  data.period = []
  data.currentPage = 1
  data.pageSize = 20
  activeName.value = 'all'
  data.times = currTime()
  emits('getChildren', activeName.value, data.times)
}

// 给父组件传递值
const emits = defineEmits(['getChildren'])
// tab切换
const activeName = ref('all')
const handleClick = (tab, event) => {
  activeName.value = tab.props.name
  emits('getChildren', activeName.value, data.times)
  table()
}
</script>

<style scoped lang="scss">
.el-tabs__header {
  margin: 9px 0 15px !important;
}

.historyTable {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #EBEEF5;
  box-sizing: border-box;
  background-color: #fff;

  &-toolbar {
    height: 50px;

    .menu-wrapper {
      position: relative;
      display: flex;

      .dg-view-menu {
        width: 100%;
        padding-left: 20px;

        .el-menu-item {
          height: 50px;
          line-height: 50px;
          margin: 0 20px;
        }
      }

      .tabs {
        position: absolute;
        top: 0px;
        left: 200px;
        line-height: 50px;
      }

      .menu-right {
        position: absolute;
        top: 10px;
        right: 20px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  &-content {
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
}

.demo-pagination-block {
  margin-top: 10px;
  height: 40px;
}
</style>
